<template>
  <div class="add-record">
    <a-modal title="添加记录" :visible="props.show" @ok="handleOK" @cancel="close">
      <a-form ref="formRef" :model="addForm" :rules="rules" :label-col="{span:6}" :wrapper-col="{span:12}">
        <a-form-item label="记录内容" name="recordContent">
          <a-textarea v-model:value="addForm.recordContent">
          </a-textarea>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, onMounted, reactive, ref } from "vue";
import { record } from "../../../service";
import { message } from "ant-design-vue";
import store from "../../../store/index";
//不要ref  表单初始数据
const formData = {
  recordContent: "",
  userId: "",
};
export default defineComponent({
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    /**表单校验 */
    const formRef = ref();
    const rules = {
      recordContent: [
        {
          required: true,
          message: "必填",
          trigger: "blur",
        },
      ],
    };

  

    /**添加信息 */
    const addForm = ref(JSON.parse(JSON.stringify(formData)));
    const handleOK = async () => {
      formRef.value.validate().then(async () => {
        addForm.value.userId = store.state.userInfo._id; //获取userId
        console.log("点击ok", addForm.value);
        const res = await record.add(addForm.value);
        if (res.data.code == 200) {
          console.log("record.add", res.data.data);
          message.success(res.data.msg);
          //添加成功,关闭modal
          context.emit("setShow", false);
        }
      });
    };
    /**关闭弹窗 */
    const close = () => {
      context.emit("setShow", false);
    };

    return {
      formRef,
      rules,

      addForm,
      formData,
      handleOK,

      props,
      close,
    };
  },
});
</script>

<style lang='less'>
</style>